<template>
  <div>
    <el-skeleton style="height: 50vh" :rows="4" :loading="loading" animated>
      <el-table
        :height="400"
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        :header-cell-style="{
          background: '#F7F9FD',
          color: '#000',
          height: '48px',
          borderTop: '1px soild #E4E8F2'
        }"
      >
        <template #empty>
          <el-empty :image-size="150" description="暂无数据"></el-empty>
        </template>

        <el-table-column type="index" label="序号" width="80">
          <template v-slot="scope">
            <span>{{
              (pageState.pageNum - 1) * pageState.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="btaskName" label="任务名称"></el-table-column>
        <el-table-column prop="lastUpdateTime" label="最后更新时间">
        </el-table-column>
        <el-table-column
          prop="curHandleUserName"
          label="处理人"
        ></el-table-column>
        <el-table-column label="状态" width="80">
          <template #default="{ row }">
            <span v-if="row.approveStatus == 1">审批中</span>
            <span v-if="row.approveStatus == 2">审批完成</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="{ row }">
            <el-button
              v-if="row.nodeStatusCode"
              type="text"
              @click="handleView(row)"
              v-auth="`/projectsB/matters--look`"
              >详情</el-button
            >
            <el-button
              v-if="!row.instanceId && row.nodeStatusCode === 'ACT_010'"
              type="text"
              size="small"
              @click="showRecallMessageBox(row)"
              v-auth="`/projectsB/matters--delete`"
              >撤回</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <re-pagination
        v-if="total > 0"
        :total="total"
        v-model:page="pageState.pageNum"
        v-model:limit="pageState.pageSize"
        @pagination="handleChangePage"
      />
    </el-skeleton>
    <el-dialog
      title="查看详情"
      v-model="dialogVisibleDetail"
      width="1000px"
      destroy-on-close
    >
      <approval-content
        :contractId="id"
        :nodeDefId="nodeDefId"
        :isEdit="false"
        :flowType="flowType"
      >
      </approval-content>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import RePagination from "/@/components/RePagination/index.vue";
import { reactive, defineComponent, ref, toRef, toRefs } from "vue";
import NotifMessage from "/@/utils/message/notification";
import { ElMessageBox } from "element-plus";
import ApprovalContent from "../../approval/detail/content.vue";
import { getDetailList } from "/@/api/construction";
import { recallProcessFlow } from "/@/api/construction";
import { handlePreview } from "/@/utils/file";
import { clickEvent } from "/@/utils/func";
export default defineComponent({
  components: {
    RePagination,
    ApprovalContent
  },
  name: "detailList",
  props: {
    checkItem: {
      type: Object,
      default: () => {}
    }
  },
  emits: ["closeList"],
  setup(props, { emit }) {
    const tableData = ref([]);
    const total = ref<number>(0);
    const loading = ref<boolean>(false);
    const checkItemProp = toRef(props, "checkItem");
    const pageState = {
      pageNum: 1,
      pageSize: 10,
      checkItemId: checkItemProp.value?.id
    };
    let state = reactive({
      //   dialogVisibleTransferAdd: false, // 添加成员弹窗是否显示
      //   acceptUsers: [],
      //   taskInfo: {} as any,
      dialogVisibleDetail: false, // 查看页面是否显示
      id: 0,
      nodeDefId: "ACT_010",
      flowType: ""
      //   activeStage: 0
      //   // showConfirm: false,
      //   // delConfirmtext: "确认删除该条记录吗？",
      //   // startConfirm: false,
      //   // startConfirmtext: "确认删除该条记录吗？"
    });
    //获取检查列表
    const getDetailListData = async () => {
      try {
        loading.value = true;
        const { code, data } = await getDetailList({
          deviceTaskId: checkItemProp.value?.id,
          ...pageState
        });
        if (code === 200) {
          tableData.value = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    };
    const handleLook = async row => {
      const instanceId = row.instanceId;
      emit("closeList", instanceId);
    };

    const handleChangePage = () => {
      getDetailListData();
    };

    const handleView = row => {
      state.id = row.id;
      state.nodeDefId = row.nodeStatusCode.toUpperCase() || "ACT_010";
      state.flowType = row.flowMinType;
      state.dialogVisibleDetail = true;
    };

    const showRecallMessageBox = row => {
      ElMessageBox.confirm("确定撤回该流程吗？", "", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        iconClass: "el-icon-question"
      })
        .then(() => {
          processRecall(row);
        })
        .catch(() => {});
    };

    const processRecall = async row => {
      try {
        const { code, message } = await recallProcessFlow({
          deviceTaskId: checkItemProp.value?.id,
          id: row.id
        });
        if (code === 200) {
          NotifMessage.success(message);
          clickEvent("B类设备项目流程", "撤回", "撤回B类项目流程");
          getDetailListData();
        } else {
          NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    };

    // const onInitFileList = (list: any[]) => {
    //   if (!list || !list.length || !list[0]?.fileName) return;
    //   const newFileList = list.map(item => {
    //     return {
    //       name: item?.fileName,
    //       response: {
    //         data: item,
    //         code: 200
    //       }
    //     };
    //   });
    //   return newFileList;
    // };

    getDetailListData();
    return {
      ...toRefs(state),
      tableData,
      total,
      loading,
      pageState,
      handleLook,
      getDetailList,
      handleChangePage,
      handlePreview,
      handleView,
      showRecallMessageBox,
      processRecall
    };
  }
});
</script>
<style lang="scss" scoped>
:deep .el-dialog__body {
  padding: 16px;
}

:deep .el-table {
  border: none;
}

:deep .el-table__fixed-right::before {
  display: none;
}
</style>
